<template>
  <div class="api">
    <el-row justify="center">
      <el-col :span="14">
        <el-card style="width: 50vw;height: 73vh;margin-top: 4vh;border-radius: 10px" :body-style="{ padding: '10px' }">
           <el-card style="width: 48.5vw;height: 60vh;background-color: #999999">
             <el-scrollbar style="height: 58vh">
               <template v-for="(item,index) in messageList" :key="index">
                 <div :style="{'margin-top':index === 0 ? '':'1em'}">
                   <el-row>
                     <el-col :span="2">
                       <el-avatar :src="item.avatarLink"></el-avatar>
                     </el-col>
                     <el-col :span="8" style="margin-top: 1em;font-weight: 600">
                       {{item.createUserName}}-{{item.createTime}}
                     </el-col>
                   </el-row>
                   <div style="margin-left: 4em">
                     {{item.content}}
                   </div>
                 </div>
               </template>
             </el-scrollbar>
           </el-card>
          <el-row :gutter="10">
            <el-col :span="21">
              <el-input
                type="textarea"
                style="margin-top: 1em"
                :rows="2"
                placeholder="请输入内容"
                v-model.trim="message"
                :autosize="{ minRows: 2, maxRows: 2}"/>
            </el-col>
            <el-col :span="3">
              <svg class="icon"
                   aria-hidden="true"
                   @click="send"
                   style="width: 4em;height: 4em;margin-top: 10px;margin-left: 10px;cursor:pointer">
                <use xlink:href="#icon-fasong"></use>
              </svg>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
  name: 'index',
  data(){
    return{
      messageList:[],
      message: null,
      total:0
    }
  },
  mounted () {
    this.getMessage()
  },
  methods:{
    getMessage(){
      this.$http.get('/api/comment',{params:{'current':1,'size':50}}).then(res =>{
        this.messageList = res.data.data.records
        this.total = res.data.data.total
      })
    },
    //发送消息
    send(){
      if (this.message === null){
        ElMessage.warning({
          showClose: true,
          message: '请输入内容再点击提交哦',
          type: 'warning',
        })
        return
      }
      this.$http.post('/api/comment',{'content':this.message}).then(() =>{
        this.getMessage()
        this.message = null
      })
    }
  }
}
</script>

<style scoped>
.api {
  width: 100%;
  height: 79vh;
  background-image: url("../../assets/jpg/feiji.16440d60.svg");
}
</style>
